<template>
  <div class="h-all flex fd-c">
    <div class="fs-20 flex nodarg ra-10 mr10 ai-c">
      <Select placeholder="年级" @change="initData(1)" clear class="w-100 b-0 hand fs-15 h-35" :data="nianji" props="t,v" v-model="query.grade"></Select>
      <Select placeholder="单元" @change="initData(1)" clear class="w-120 b-0 hand fs-15 ml10 h-35" :data="unitList" props="t,v" v-model="query.unit"></Select>
      <Select placeholder="上下册" @change="initData(1)" clear class="w-90 b-0 hand fs-15 ml10 h-35" :data="[{value:1,label:'上册'},{value:2,label:'下册'}]" v-model="query.volume"></Select>
      <span class="flex-1"></span>
      <page @change="initData" :size="query.size" :total="query.total" :page="query.page"></page>
    </div>
    <div class="w-all mt10 flex-1 nodarg">
      <scroll>
        <div class="w-all pt10 pb10 pr15 flex fw ">
          <div v-for="item in info.list" style="width:350px;height: 280px;" class="flex pt10 fd-c mb10 ml10 pl20 ra-10 glass-card">
            <div class="fs-40 fc-FF4500 fb">{{item.word}}</div>
            <div @click="onWordPlay(item.word,0)" class="fs-23 mt10 hand nodarg flex ai-c fc-aa">英：{{item.en_pronunciation}} <span class="iconfont icon-ting fs-25 fc-pri"></span></div>
            <div @click="onWordPlay(item.word,1)" class="fs-23 mt5 hand nodarg flex ai-c fc-aa">美：{{item.us_pronunciation}} <span class="iconfont icon-ting fs-25 fc-pri"></span></div>
            <div class="fs-16 pr10" v-html="item.desc"></div>
          </div>
        </div>
      </scroll>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { reactive, ref } from 'vue';
import yy from '@lib/mixin';
import useStore from '../../store';
const st = useStore();
const { ipcRenderer } = window.require('electron');
const info = reactive({
  list: [],
  playAudio: null,
})

const nianji = [
  { t: '一年级', v: 1 },
  { t: '二年级', v: 2 },
  { t: '三年级', v: 3 },
  { t: '四年级', v: 4 },
  { t: '五年级', v: 5 },
  { t: '六年级', v: 6 },
  { t: '初一', v: 7 },
  { t: '初二', v: 8 },
  { t: '初三', v: 9 }
]
const unitList = [
  { t: '一单元', v: 1 },
  { t: '二单元', v: 2 },
  { t: '三单元', v: 3 },
  { t: '四单元', v: 4 },
  { t: '五单元', v: 5 },
  { t: '六单元', v: 6 },
  { t: '七单元', v: 7 },
  { t: '八单元', v: 8 },
  { t: '九单元', v: 9 },
  { t: '十单元', v: 10 },
  { t: '十一单元', v: 11 },
  { t: '十二单元', v: 12 },
  { t: '十三单元', v: 13 },
  { t: '十四单元', v: 14 },
]

const query = reactive({
  grade: 3,
  unit: 1,
  volume: 1,
  page: 1,
  size: 50,
  serch: '',
  total: 0
})

function onWordPlay(word, type) {
  let src = `http://dict.youdao.com/dictvoice?type=${type}&audio=${word}`;
  if (info.playAudio) {
    info.playAudio.pause();
    info.playAudio = null;
  }

  info.playAudio = new Audio(src);
  info.playAudio.volume = 1;
  info.playAudio.play()
}

function formatWordDesc(v) {
  return v.replace(/n.|vt.|vi.|conj.|adj.|adv.|v.|pron.|prep.|interj.|art./g, e => {
    switch (e) {
      case 'adj.': return `<br><i class="fc-999">形容词：</i>`;
      case 'adv.': return `<br><i class="fc-999">副词：</i>`;
      case 'v.': return `<br><i class="fc-999">动词：</i>`;
      case 'vi.': return `<br><i class="fc-999">不及物动词：</i>`;
      case 'pron.': return `<br><i class="fc-999">代词：</i>`;
      case 'prep.': return `<br><i class="fc-999">介词：</i>`;
      case 'n.': return `<br><i class="fc-999">名词：</i>`;
      case 'conj.': return `<br><i class="fc-999">连词：</i>`;
      case 'interj.': return `<br><i class="fc-999">感叹词：</i>`;
      case 'art.': return `<br><i class="fc-999">冠词：</i>`;
      case 'vt.': return `<br><i class="fc-999">及物动词：</i>`;
      default: return e
    }
  })
}


function initData(page) {
  if (page) query.page = page;
  let where = `${query.grade && (` and grade=${query.grade}`) || ''}
  ${query.unit && (` and unit=${query.unit}`) || ''}
  ${query.volume && (` and volume=${query.volume}`) || ''}
  ${query.serch && ` and word like '%${query.serch}%'` || ''} `;
  st.invoke('sql', { table: 'dictionary', where, ...query }).then(res => {
    query.total = res.total;
    info.list = res.list.map(v => {
      return {
        ...v,
        desc: formatWordDesc(v.desc)
      }
    }) || [];
  })
}

initData()


</script>

<style lang='less'>
.b-0 {
  border: 0;
}
</style>